<template>
  <div class="articles">
    <el-container>
      <el-header>
        <h1>文章列表</h1>
        <el-menu mode="horizontal" router>
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/articles">文章列表</el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <el-card>
          <el-table :data="articles" style="width: 100%">
            <el-table-column prop="title" label="标题">
              <template #default="{ row }">
                <router-link :to="`/article/${row.id}`" class="article-title">
                  {{ row.title }}
                </router-link>
              </template>
            </el-table-column>
            <el-table-column prop="author" label="作者" width="120" />
            <el-table-column prop="date" label="发布日期" width="180" />
            <el-table-column prop="category" label="分类" width="120" />
          </el-table>
          <div class="pagination-container">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :total="total"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </el-main>
      <el-footer>
        <p>&copy; 2024 我的博客. All rights reserved.</p>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElContainer, ElHeader, ElMain, ElFooter, ElMenu, ElMenuItem, ElCard, ElTable, ElTableColumn, ElPagination } from 'element-plus'

interface Article {
  id: number
  title: string
  author: string
  date: string
  category: string
}

const articles = ref<Article[]>([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 模拟数据
const mockArticles: Article[] = Array.from({ length: 50 }, (_, index) => ({
  id: index + 1,
  title: `文章标题 ${index + 1}`,
  author: '作者',
  date: '2024-01-01',
  category: '技术'
}))

const loadArticles = () => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  articles.value = mockArticles.slice(start, end)
  total.value = mockArticles.length
}

const handleSizeChange = (val: number) => {
  pageSize.value = val
  loadArticles()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  loadArticles()
}

onMounted(() => {
  loadArticles()
})
</script>

<style scoped>
.articles {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.el-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.el-header {
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-header h1 {
  margin: 0 0 20px;
  color: #409EFF;
}

.el-main {
  flex: 1;
  padding: 20px;
  background-color: #f5f7fa;
}

.el-footer {
  text-align: center;
  padding: 20px;
  background-color: #fff;
  color: #666;
}

.article-title {
  color: #409EFF;
  text-decoration: none;
}

.article-title:hover {
  text-decoration: underline;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.el-card {
  height: 100%;
}

.el-table {
  margin-bottom: 20px;
}
</style>